<template>
	<view class="article">
		<web-header :select_name="'article'"></web-header>
		<view class="content_template">
			<view class="content_left" style="">
				<view class="h5_content">
					<view class="header_title h5_show  ">
						<view class="header">
							<view class="title">热门资讯</view>
							<!-- <image src="/static/2.1/btn_more.png"></image> -->
						</view>
						<view class="line"></view>
					</view>
				<!-- 热门资讯模板 -->
				<view class=" " v-for="(item,index) in hot"  @click="openInfo(item)">

					<article-cell style='margin-top: 40rpx;' :item='item'>
					</article-cell>
					<view v-if="index == 2">
						<image class="ad_01" src="/static/2.2/ad_01.png"></image>
					</view>
					<view class="h5_line h5_show"></view>

				</view>
				</view>
			</view>
			<view class="content_right">
				<filtrate-card></filtrate-card>
			</view>

		</view>

		<page-pagination style="margin-bottom: 60rpx;" @change="page_change" :currentPage='page.current'
			:total="page.total" color="#048597" :showAround="true" :btnText="true" :forceEllipses="true">
		</page-pagination>
		<image class="ad_02" src="/static/2.2/ad_02.png"></image>
		


		<!-- <view class="content">
			<view class="item" v-for="item in hot" @click="openInfo(item)">
				<image mode="aspectFill" :src="item.smallImage"></image>
				<view class="title">{{item.title}}</view>
				<view class="createDate">{{item.createDate}} </view>
			</view>

		</view>
		<view class="more">
			<image @click="loadData()" src="/static/article/more.png"></image>
		</view> -->


		<web-foot></web-foot>
		
	</view>
</template>

<script>
	import web_header from '@/components/web-header.vue'
	import web_foot from '@/components/web-foot.vue'
	//右侧筛选卡片
	import filtrate_card from '@/components/filtrate_card.vue'
	// import information_cell from '@/components/information_cell/information_cell.vue'

	export default {

		components: {
			'web-header': web_header,
			'web-foot': web_foot,
			'filtrate-card': filtrate_card,
			 
		},
		data() {
			return {
				hot_page: 1,
				hot: [

				],
				page: {
					total: 88,
					size: 10,
					current: 1
				}
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			openInfo(item) {
				console.log('打开详情')
				uni.navigateTo({
					url: './article_info?id=' + item.id
				})
			},
			page_change(currentPage, type) {
				this.hot_page = currentPage
				this.loadData()
				// this.page.currentPage = currentPage;
				console.log("点击了" + type + "，当前页：" + currentPage);
			},
			loadData() {
				var that = this;
				this.service("/website/specialColumnDataList", 'get', {
					page: this.hot_page,
					pageSize: 10
				}).then(res => {
					uni.stopPullDownRefresh();
					let arr = [];
					// if (this.hot.length != 0) {
					// 	arr = this.hot
					// }
					// if (res.data.records.length < 10) {
					// 	this.more = 'noMore'
					// } else {
					// 	this.loading = false
					// }

					arr.push(...res.data.records)
					that.hot = arr
					// that.hot_page += 1;
					console.log(res)
					that.page = res.data



					// this.hot = res.data.records;
					uni.stopPullDownRefresh();
				})
			}

		}
	}
</script>

<style>

</style>
